<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页时钟（图形版）</title>
    <style>
        * {
            box-sizing: border-box; /*盒子尺寸: 內减模式,  防止 内外边距 设置可能撑大盒子*/
        }

        .表盘 {
            width: 600px; /* 宽高 */
            height: 600px;
            background: url(表盘.jpg) no-repeat; /* 插入背景图片  不平铺*/
            margin: 0 auto; /* 版心居中 */
            position: relative; /* 定位:相对定位  子绝父相定位方法 */
        }

        .时针, .分针, .秒针 {
            background: url(时针.png) no-repeat center; /* 插入背景图片 不平铺 居中 */
            transform: rotate(60deg);

            width: 100%; /* 宽高 随父级 */
            height: 100%;

            position: absolute; /* 定位:绝对定位  子绝父相定位方法 */
            left: 0; /* 定位 偏移量 */
            top: 0;
        }

        .分针 {
            background-image: url(分针.png); /* 插入背景图片 */
            /* 正数：顺时针旋转；负数：逆时针旋转. 单位是度数*/
            transform: rotate(0deg);
        }

        .秒针 {
            background-image: url(秒针.png); /* 插入背景图片 */
            transform: rotate(0deg);
        }
    </style>
</head>
<body>

<div class="表盘">
    <div class="时针" id="h"></div>
    <div class="分针" id="m"></div>
    <div class="秒针" id="s"></div>
</div>

<script>
    /* ----------定时器 实现指针移动---------- */
    function 动态表盘() {
        // 获取DOM元素
        const 秒针 = document.querySelector('.秒针')
        const 分针 = document.querySelector('.分针')
        const 时针 = document.querySelector('.时针')
        let 角度 = 0
        function 秒针移动() {
            角度 += 6
            秒针.style.transform = `rotate(${角度}deg)`
        }
        function 分针移动() {
            角度 += 6
            分针.style.transform = `rotate(${角度}deg)`
        }
        function 时针移动() {
            角度 += 6
            分针.style.transform = `rotate(${角度}deg)`
        }
        // 使用 定时器, 实现针的无限移动
        setInterval(秒针移动, 1000)
        setInterval(分针移动, 60000)
        setInterval(时针移动, 3600000)
    }

    // 调用函数
    动态表盘()

</script>
</body>
</html>